<template>
  <div class="app-container">

    <el-row>
      <!--类型数据-->
      <el-col :span="3" :xs="24" >
        <div class="head-container">
          <el-input
            v-model="btypeName"
            placeholder="请输入类型名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="bedTypeOptions"
            :props="{ label: 'btypeName', children: 'children' }"
            node-key="btypeId"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--  床位数据-->
      <el-col :span="21" :xs="24" style="padding-left: 10px">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="床位状态" prop="status">
            <el-input
              v-model="queryParams.status"
              placeholder="(0空闲，1占用，2预约)"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="患者信息" prop="patientId">
            <el-input
              v-model="queryParams.patientId"
              placeholder="请输入患者信息"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="医生信息" prop="doctorName">
            <el-input
              v-model="queryParams.doctorName"
              placeholder="请输入医生信息"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="护士信息" prop="nurseName">
            <el-input
              v-model="queryParams.nurseName"
              placeholder="请输入护士信息"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手术详情" prop="surgeryAppointment">
            <el-input
              v-model="queryParams.surgeryAppointment"
              placeholder="请输入手术详情"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="入住时间" prop="checkinTime">
            <el-date-picker clearable
                            v-model="queryParams.checkinTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择入住时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:bed:add']"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:bed:edit']"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:bed:remove']"
            >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:bed:export']"
            >导出
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="bedList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" key="selection"/>
          <el-table-column label="床位编号" align="center" prop="bedId" key="bedId"/>
          <el-table-column label="床位类型" align="center" prop="btype.btypeName" key="btypeName"/>
          <el-table-column label="床位状态(0空闲，1占用，2预约)" align="center" prop="status" :formatter="formatStatus"
                           key="status"/>
          <el-table-column label="床位任务" align="center" prop="bedTask" key="bedTask">
            <template slot-scope="scope">
              <span v-if="scope.row.bedTask">{{ scope.row.bedTask }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="患者信息" align="center" prop="patient.patientName" key="patientName">
            <template slot-scope="scope">
              <span v-if="scope.row.patient.patientName">{{ scope.row.patient.patientName }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="医生信息" align="center" prop="doctorName" key="doctorName">
            <template slot-scope="scope">
              <span v-if="scope.row.doctorName">{{ scope.row.doctorName }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="护士信息" align="center" prop="nurseName" key="nurseName">
            <template slot-scope="scope">
              <span v-if="scope.row.nurseName">{{ scope.row.nurseName }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="手术详情" align="center" prop="surgeryAppointment" key="surgeryAppointment">
            <template slot-scope="scope">
              <span v-if="scope.row.surgeryAppointment">{{ scope.row.surgeryAppointment }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="入住时间" align="center" prop="checkinTime" width="180" key="checkinTime">
            <template slot-scope="scope">
              <span v-if="scope.row.checkinTime">{{ parseTime(scope.row.checkinTime, '{y}-{m}-{d}') }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" key="remark">
            <template slot-scope="scope">
              <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column width="180%" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:bed:edit']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-check"
                @click="handleDischarge(scope.row)"
                v-hasPermi="['system:bed:discharge']"
              >出院
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:bed:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 添加或修改床位信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="床位编号" prop="bedId">
              <el-input v-model="form.bedId" placeholder="请输入床位编号"/>
            </el-form-item>
            <el-form-item  v-if="form.bedId !== null &&form.id !==null " label="床位状态">
              <el-select v-model="form.status"  filterable placeholder="请选择床位使用情况">
                <el-option
                  v-for="status  in bedStatusOptions"
                  :key="status .value"
                  :label="status .label"
                  :value="status .value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="床位类型">
              <el-select v-model="form.btype.btypeId"  filterable placeholder="请选择床位类型">
                <el-option
                  v-for="item in bedTypeOptions"
                  :key="item.btypeId"
                  :label="item.btypeName"
                  :value="item.btypeId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item  v-if="form.bedId !== null && form.status === 1" label="床位任务" prop="bedTask">
          <el-input v-model="form.bedTask" type="textarea" placeholder="请输入床位任务"/>
        </el-form-item>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="患者信息" prop="patientId">
          <el-select v-model="form.patientId" filterable placeholder="请输入患者信息">
            <el-option
              v-for="item in patientOptions"
              :key="item.patientId"
              :label="item.patientName"
              :value="item.patientId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.bedId !== null && form.status === 1" label="医生信息" prop="doctorInfo">
              <el-select v-model="form.doctorInfo" filterable placeholder="请选择医生">
                <el-option
                  v-for="item in doctorOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.bedId !== null && form.status === 1" label="护士信息" prop="doctorInfo">
              <el-select v-model="form.nurseInfo" :label="form.doctorName" filterable placeholder="请选择护士">
                <el-option
                  v-for="item in nurseOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="手术详情" prop="surgeryAppointment">
          <el-input v-model="form.surgeryAppointment" placeholder="请输入手术详情"/>
        </el-form-item>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="入住时间" prop="checkinTime">
          <el-date-picker clearable
                          v-model="form.checkinTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择入住时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listBed, getBed, delBed, addBed, updateBed,dischargeBed } from '@/api/system/bed'
  import { getBtype, listBtype } from '@/api/system/btype'
  import { listPatient } from '@/api/system/patient'
  import {
    listUser,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from '@/api/system/user'

  export default {
    name: 'Bed',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 床位信息表格数据
        bedList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        //医生选项
        doctorOptions: [],
        //患者选项
        patientOptions: [],
        //护士选项
        nurseOptions: [],
        //床位类型树
        bedTypeOptions: [],
        //床位类型名称
        btypeName: undefined,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          btypeId: null,
          //用于筛选的床位类别
          btype: {
            btypeName: null
          },
          patient: {
            patientName: null
          },
          status: null,
          bedTask: null,
          patientId: null,
          doctorInfo: null,
          nurseInfo: null,
          surgeryAppointment: null,
          checkinTime: null
        },
        // 表单参数
        form: {
          doctorInfo: '', // 用于绑定医生信息的字段
          doctorName: '', // 用于显示医生名字的字段
          btype: {
            btypeName: ''
          }
        },
        bedStatusOptions: [
          { value: 0, label: '空闲' },
          { value: 1, label: '占用' },
          { value: 2, label: '预约' },
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // 表单校验
        rules: {
          // btypeName: [
          //   { required: true, message: '床位类型不能为空', trigger: 'change' }
          // ]
        }
      }
    },
    watch: {
      // 根据名称筛选部门树
      btypeName(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
      this.getList()
      this.getIdType()
      this.getPatient()
      this.getBedTypeList()
    },
    methods: {
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.btypeId = data.btypeId
        console.log('---queryParams--', this.queryParams)
        this.handleQuery()
      },
      //修改显示
      formatStatus(row, column) {
        const status = row[column.property]
        switch (status) {
          case 0:
            return '空闲'
          case 1:
            return '占用'
          case 2:
            return '预约'
          default:
            return ''
        }
      },
      /** 查询床位类型列表 */
      getBedTypeList() {
        listBtype().then(response => {
          this.bedTypeOptions = response.rows
        })
      },
      /** 查询床位信息列表 */
      getList() {
        this.loading = true
        listBed(this.queryParams).then(response => {
          this.bedList = response.rows
          console.log('---getList--', response)
          this.total = response.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          bedId: null,
          btypeId: null,
          btype: {
            btypeName: null
          },
          status: null,
          bedTask: null,
          patientId: null,
          doctorInfo: null,
          doctorName: null,
          nurseInfo: null,
          nurseName: null,
          surgeryAppointment: null,
          checkinTime: null,
          remark: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        console.log("---this.queryParams---",this.queryParams)
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryParams.deptId = undefined
        this.queryParams.btypeId = undefined
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.bedId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 获取医生及护士名单
      getIdType() {
        listUser().then(response => {
          this.doctorOptions = response.rows.filter(user => user.identityType === 'D')
          this.nurseOptions = response.rows.filter(user => user.identityType === 'N')
        })
      },
      // 获取患者名单
      getPatient() {
        listPatient().then(response => {
          console.log("---listPatient---",response)
          this.patientOptions = response.rows
        })
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加床位信息'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const bedId = row.bedId || this.ids
        getBed(bedId).then(response => {
          console.log('---getBed---', response.data)
          this.form = response.data
          console.log('---form---', this.form)
          this.open = true
          this.title = '修改床位信息'
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          console.log('---submit form---', this.form)

          this.form.btypeId = this.form.btype.btypeId
          // this.form.doctorInfo=this.form.doctorName
          // this.form.nurseInfo=this.form.nurseName
          if (valid) {
            if (this.form.id != null) {
              updateBed(this.form).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addBed(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        const bedIds = row.bedId || this.ids
        this.$modal.confirm('是否确认删除床位信息编号为"' + bedIds + '"的数据项？').then(function() {
          return delBed(bedIds)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      },
      /** 出院按钮操作 */
      handleDischarge(row) {
        const bedId = row.bedId || this.ids
        this.$modal.confirm('是否确认出院床位信息编号为"' + bedId + '"的病人项？').then(function() {
          return dischargeBed(bedId)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('出院成功')
        }).catch(() => {
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/bed/export', {
          ...this.queryParams
        }, `bed_${new Date().getTime()}.xlsx`)
      }
    }
  }
</script>
